<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: white;
      }

      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        1000% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600">

      <!-- 第十一章 滤镜、投影 -->

      <!--
        P154
        feMorphology元素，允许对图形线条瘦身或加厚
        operator：
          erode：瘦身
          dilate：加厚
        radius：设置变薄或加厚了多少单位
      -->

      <!--
        feConvolveMatrix元素，元素允许我们按照它邻近的像素计算像素的新值。这个滤镜允许我们生成诸如模糊、锐化、浮雕和斜切这样的效果。
      -->
      <defs>
        <filter id="emboss">
          <!-- 默认order=3，3 x 3矩阵，可以指定order=N，即N x N -->
          <!--
            的默认行为是对所有颜色分量进行计算，包括阿尔法通道。在这个
            前提下，只有每个形状的边缘部分，即左上角的邻近像素的阿尔法值比右下角邻近像
            素的阿尔法值更高时，才会显示出来。为了只对红、绿、蓝三个值进行计算，要指定
            preserveAlpha 为 true；它的默认值为 false。
          -->
          <feConvolveMatrix preserveAlpha="true"
                            order="3"
                            kernelMatrix="
                              1 0 0
                              0 0 0
                              0 0 -1
                            "
                            bias="0.5" />
        </filter>
        <g id="flower">
          <!-- 这里绘制花朵图形 -->
          <image xlink:href="/source/flower.svg" />
        </g>

      </defs>
      <use xlink:href="#flower"
           style="filter: url(#emboss);" />

      <!--
        feDisplacementMap，使用渐变作为位移映射
        P156
      -->
      <defs>
        <!-- 渐变 -->
        <linearGradient id="gradient">
          <stop offset="0"
                style="stop-color: #ff0000;" />
          <stop offset="0.5"
                style="stop-color: #00ff00;" />
          <stop offset="1"
                style="stop-color: #000000;" />
        </linearGradient>
        <!-- 渐变矩形 -->
        <rect id="rectangle"
              x="0"
              y="0"
              width="100"
              height="200"
              style="fill: url(#gradient);" />
        <filter id="displace">
          <!-- 获取渐变矩形滤镜 -->
          <feImage xlink:href="#rectangle"
                   result="grad" />
          <!-- 使用色彩偏移 -->
          <feDisplacementMap scale="10"
                             xChannelSelector="R"
                             yChannelSelector="G"
                             in="SourceGraphic"
                             in2="grad" />
        </filter>
        <g id="flower">
          <!-- 这里绘制花朵图形 -->
          <image x="150"
                 width="150"
                 height="200"
                 xlink:href="/source/flower.svg" />
        </g>
      </defs>
      <use xlink:href="#flower"
           x="150"
           style="filter: url(#displace);" />
      <!-- TODO 好像没有生效，但不知道为啥 -->
      <use xlink:href="#rectangle"
           x="300" />

      <defs>
        <filter id="self-displace">
          <feDisplacementMap scale="10"
                             xChannelSelector="R"
                             yChannelSelector="G"
                             in="SourceGraphic"
                             in2="SourceGraphic" />
        </filter>
        <g id="flower">
          <!-- 这里绘制花朵图形 -->
        </g>
      </defs>
      <use x="450"
           xlink:href="#flower"
           style="filter: url(#self-displace);" />
    </svg>


    <script>
      const ele = document.querySelector("#xxx");
      let n = 0;
      function Renderer() {
        n++;
        if (n >= 360) n = 0;
        window.requestAnimationFrame(Renderer);
      }
      // Renderer();
    </script>
  </body>

</html>
